<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-07-01 00:27:22
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container fit bg-#fff column relative">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="`已预约`" name="first">
        <div class="model-list-body h-col m-t-14 flex flex-col flex-nowrap"
          style="height: calc(100vh - 140px); flex: none">
          <BaseTable :columns="column" :loading="loading" :table-data="tableData">
            <template #icon="{ row }">
              <div class="flex itemAlign-center">
                <img :src="row.users_info_payload.apply_user_info.icon" alt="" class="head" />
              </div>
            </template>
            <template #unit_name="{ row }">
              <div>
                {{ row.users_info_payload.scheduled_user_info.unit_name }}
              </div>
            </template>
            <template #unit_department="{ row }">
              <div>
                {{ row.users_info_payload.scheduled_user_info.unit_department }}
              </div>
            </template>
            <template #unit_title="{ row }">
              <div>
                {{ row.users_info_payload.scheduled_user_info.unit_title }}
              </div>
            </template>
            <template #action="{ row }">
              <div class="flex">
                <el-button type="text" size="small" @click="cancel(row)" style="padding: 5px 0">
                  取消预约
                </el-button>
              </div>
            </template>
          </BaseTable>
          <div class="col-auto m-y-15 p-l-4">
            <Pagination :pagination-data="pageData" @paginationFun="changePage" />
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane :label="`历史预约`" name="second">
        <div class="model-list-body h-col m-t-14 flex flex-col flex-nowrap"
          style="height: calc(100vh - 140px); flex: none">
          <BaseTable :columns="column2" :loading="loading2" :table-data="tableData2">
            <template #icon="{ row }">
              <div class="flex itemAlign-center">
                <img :src="row.users_info_payload.apply_user_info.icon" alt="" class="head" />
              </div>
            </template>
            <template #unit_name="{ row }">
              <div>
                {{ row.users_info_payload.scheduled_user_info.unit_name }}
              </div>
            </template>
            <template #unit_department="{ row }">
              <div>
                {{ row.users_info_payload.scheduled_user_info.unit_department }}
              </div>
            </template>
            <template #unit_title="{ row }">
              <div>
                {{ row.users_info_payload.scheduled_user_info.unit_title }}
              </div>
            </template>
          </BaseTable>
          <div class="col-auto m-y-15 p-l-4">
            <Pagination :pagination-data="pageData2" @paginationFun="changePage2" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseTable from '@/components/bmp/table/index.vue'
import Pagination from '@/components/pagination/pagination'
import { listSubscribe, cancelSubscribe } from '@/api/my-subscribe'

export default {
  components: {
    BaseTable,
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      pageData: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pageData2: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      loading2: false,
      column: [
        {
          prop: 'icon',
          label: '头像'
        },
        {
          prop: 'contact_name',
          label: '姓名'
        },
        {
          prop: 'unit_name',
          label: '单位名称'
        },
        {
          prop: 'unit_department',
          label: '科室'
        },
        {
          prop: 'unit_title',
          label: '职称'
        },
        {
          prop: 'scheduled_date',
          label: '预约时间'
        },
        {
          prop: 'action',
          label: '操作'
        }
      ],
      column2: [
        {
          prop: 'icon',
          label: '头像'
        },
        {
          prop: 'contact_name',
          label: '姓名'
        },
        {
          prop: 'unit_name',
          label: '单位名称'
        },
        {
          prop: 'unit_department',
          label: '科室'
        },
        {
          prop: 'unit_title',
          label: '职称'
        },
        {
          prop: 'create_datetime',
          label: '预约时间'
        }
      ],
      tableData: [],
      tableData2: []
    }
  },
  created() { },
  watch: {
    activeName(val) {
      if (val === 'first') {
        this.getData()
      } else {
        this.getData2()
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    cancel(row) {
      cancelSubscribe({
        reservation_id: row.id
      }).then((res) => {
        this.pageData2.currentPage = 1
        this.getData()
        this.$message.success('操作成功')
      })
    },
    changePage(val) {
      this.pageData.currentPage = val.currentPage
      this.pageData.pageSize = val.pageSize
      this.getData()
    },

    changePage2(val) {
      this.pageData2.currentPage = val.currentPage
      this.pageData2.pageSize = val.pageSize
      this.getData2()
    },
    getData() {
      listSubscribe({
        type: 1,
        dispose_switch: 1,
        page_num: this.pageData.currentPage,
        limit_size: this.pageData.pageSize
      }).then((res) => {
        this.tableData = res.data.data
        this.pageData.total = res.data.total
      })
    },
    getData2() {
      let today = new Date()
      const year = today.getFullYear()
      const month = today.getMonth() + 1 // getMonth() 返回的月份是从 0 开始的
      const day = today.getDate()
      let todayStr = `${year}-${month.toString().padStart(2, '0')}-${day
        .toString()
        .padStart(2, '0')}`
      // 输出格式为 YYYY-MM-DD
      listSubscribe({
        type: 1,
        dispose_switch: 0,
        page_num: this.pageData2.currentPage,
        limit_size: this.pageData2.pageSize,
        scheduled_date: todayStr
      }).then((res) => {
        this.tableData2 = res.data.data
        this.pageData2.total = res.data.total
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.justify-between {
  justify-content: space-between;
}
</style>
